import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// @ts-ignore
import postcssPxToViewport from 'postcss-px-to-viewport'
import { visualizer } from 'rollup-plugin-visualizer'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react({
      // 启用 React 编译器优化
      babel: {
        plugins: [
          // 可以添加 babel 插件进行进一步优化
          
        ]
      }
    }),

    // 打包分析工具
    visualizer({
      filename: 'dist/stats.html',
      open: true,
      gzipSize: true,
      brotliSize: true,
    })
  ],
  
  // 路径别名配置
  resolve: {
    alias: {
      '@': '/src',
      '@components': '/src/conpoment',
      '@pages': '/src/pages',
      '@assets': '/src/assets',
      '@utils': '/src/utils',
    }
  },

  // 构建优化配置
  build: {
    // 目标浏览器
    target: 'es2015',
    
    // 输出目录
    outDir: 'dist',
    
    // 生成 source map
    sourcemap: false,
    
    // 最小化
    minify: 'terser',
    
    // Terser 配置
    terserOptions: {
      compress: {
        // 生产环境移除 console
        drop_console: true,
        drop_debugger: true,
        // 移除未使用的代码
        unused: true,
        // 移除死代码
        dead_code: true,
      },
      mangle: {
        // 混淆变量名
        safari10: true,
      },
    },
    
    // 代码分割配置
    rollupOptions: {
      output: {
        // 手动分包
        manualChunks: {
          // React 相关库
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          // Antd 相关库
          'antd-vendor': ['antd', 'antd-mobile'],
          // 工具库
          'utils-vendor': ['axios', 'ali-oss'],
        },
        // 资源文件命名
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: (assetInfo) => {
          if (!assetInfo.name) return 'assets/[name]-[hash].[ext]'
          const info = assetInfo.name.split('.')
          const ext = info[info.length - 1]
          if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)) {
            return `media/[name]-[hash].${ext}`
          }
          if (/\.(png|jpe?g|gif|svg)(\?.*)?$/i.test(assetInfo.name)) {
            return `images/[name]-[hash].${ext}`
          }
          if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
            return `fonts/[name]-[hash].${ext}`
          }
          return `assets/[name]-[hash].${ext}`
        },
      },
    },
    
    // 打包大小警告阈值
    chunkSizeWarningLimit: 1000,
  },

  css: {
    postcss: {
      plugins: [
        postcssPxToViewport({
          unitToConvert: 'px',
          viewportWidth: 375,
          unitPrecision: 5,
          propList: ['*'],
          viewportUnit: 'vw',
          fontViewportUnit: 'vw',
          selectorBlackList: [],
          minPixelValue: 1,
          mediaQuery: false,
          replace: true,
          exclude: [],
          landscape: false,
          landscapeUnit: 'vw',
          landscapeWidth: 667
        })
      ]
    },
    // CSS 代码分割
    devSourcemap: false,
  },

  // 依赖预构建优化
  optimizeDeps: {
    include: [
      'react',
      'react-dom',
      'react-router-dom',
      'antd',
      'antd-mobile',
      'axios'
    ],
    exclude: ['@vite/client', '@vite/env']
  },

  server: {
    https: false, // 禁用HTTPS，使用HTTP
    host: '0.0.0.0', // 允许外部访问
    port: 5173, // 使用默认端口5173
    proxy: {
        '/api': {
        target: 'http://123.60.213.46:8000/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
       '/pp': {
        target: 'http://localhost:8005/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/pp/, ''),
      },
    }
  }
})